<template>
    <div>
    <van-grid column-num="3" gutter="5">
    <van-grid-item
    v-for="(menu, index) in props.menus"
    :key="index"
    style="width: 25%; height: auto"
    >
    <div
    class="icon"
    ref=""
    :style="{ backgroundPosition: menu.pos[0] / 3 + 'px ' + 
    menu.pos[1] / 3 + 'px' }"
    ></div>
    <span>{{ menu.name }}</span>
    </van-grid-item>
    </van-grid>
    </div>
    </template>
    <script setup>
    const props = defineProps(['menus'])
    </script>
    <style lang="scss" scoped>
    .icon {
    background-image: url('eshop_2241_vite_2/src/image/icon.jpg'); /* 雪碧图的路径 */
    background-repeat: no-repeat;
    display: inline-block;
    width: 58px; /* 缩放后的图标宽度 */
    height: 58px; /* 缩放后的图标⾼度 */
    background-size: 533px 1333px; /* 雪碧图的新尺⼨ */
    }
    </style>